<template>
  <!-- element ui 的tag标签的高度无法调整 -->
  <!-- <el-tabs type="border-card" stretch="true">
    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
  </el-tabs> -->
  <div class="search-bg">
    <div class="search-module">
      <div class="search-tab">
        <div
          class="tab-itemLeft"
          :class="{ active: isActiveLeft }"
          @click="ToggleLeft()"
        >
          <i class="global-icon icon-cgs"></i
          ><span class="tab-name">{{ $t('buyer.searchGlobalBuyers') }}</span>
        </div>
        <div
          class="tab-itemRight"
          :class="{ active: isActiveRight }"
          @click="ToggleRight()"
        >
          <i class="global-icon icon-gys"></i
          ><span class="tab-name">{{ $t('buyer.searchInternalBuyers') }}</span>
        </div>
      </div>
      <div class="search-editor">
        <div class="search-main" v-show="isDisplayEn">
          <label
            ><input
              type="text"
              name="keyword"
              :placeholder="$t('buyer.keywords')"
              v-model="valueen"
              class="search-text" /></label
          ><button class="search-btn" @click="searchen()">
            {{ $t('common.search') }}
          </button>
        </div>
        <div class="search-main" v-show="isDisplayZh">
          <label
            ><input
              type="text"
              name="keyword"
              :placeholder="$t('buyer.chineseKeywords')"
              v-model="valuezh"
              class="search-text" /></label
          ><button class="search-btn" @click="searchzh()">
            {{ $t('common.search') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表示买家搜索的类型 1 国外 ; 2 国内
      valueen: '',
      valuezh: '',
      //规定如何显示tab标签栏
      isActiveLeft: true,
      isActiveRight: false,
      //规定如何显示的搜索框
      isDisplayEn: true,
      isDisplayZh: false,
    }
  },
  methods: {
    //使用这样的方式 来实现tag标签的切换 待优化 代码写的有点丑
    ToggleLeft: function () {
      if (!this.isActiveLeft) {
        this.isActiveRight = this.isActiveLeft
        this.isActiveLeft = !this.isActiveLeft
        this.isDisplayZh = !this.isActiveLeft
        this.isDisplayEn = this.isActiveLeft
      }
    },
    ToggleRight: function () {
      if (!this.isActiveRight) {
        this.isActiveRight = this.isActiveLeft
        this.isActiveLeft = !this.isActiveRight
        this.isDisplayZh = !this.isActiveLeft
        this.isDisplayEn = this.isActiveLeft
      }
    },
    //英文搜索方法
    searchen() {
      // if (this.valuecn.length === 0 && this.isActiveLeft) {
      //   this.$message.error("Please enter English keywords");
      //   return;
      // }
      this.$router.push(
        `/buyerData/buyerData/index?type=1&value=${this.valueen}`
      )
    },
    //中文搜索方法
    searchzh() {
      // if (this.valuezh.length === 0 && this.isActiveRight) {
      //   this.$message.error("请输入中文关键词");
      //   return;
      // }
      // this.$router.push(
      //   `/buyerData/buyerData/index?type=2&value=${this.valuezh}`
      // );
      this.$router.push(
        // `/buyerData/buyerData/index?type=2&value=${this.valuezh}`
        {
          name: 'buyerData',
          query: {
            type: 2,
            value: this.valuezh,
          },
        }
      )
    },
  },
}
</script>

<style scoped>
/* .el-tabs {
  width: 850px;
  margin: 200px auto;
}
.el-tab-pane {
  height: 50px;
} */
div.search-module {
  width: 850px;
  margin: 0 auto;
}
div.tab-itemLeft {
  display: inline-block;
  width: 425px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #333333;
  background-color: hsla(0, 0%, 100%, 0.55);
  color: #333333;
  border-top-left-radius: 10px;
  font-weight: 800;
}
div.tab-itemRight {
  display: inline-block;
  width: 425px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #333333;
  background-color: hsla(0, 0%, 100%, 0.55);
  color: #333333;
  border-top-right-radius: 10px;
  font-weight: 800;
}
div.search-editor {
  widows: 850px;
  height: 78px;
  padding: 15px 12px;
  background-color: rgba(65, 118, 182, 0.75);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
input.search-text {
  display: inline-block;
  vertical-align: middle;
  width: 694px;
  height: 48px;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #fff;
  border: none;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
button.search-btn {
  display: inline-block;
  vertical-align: middle;
  width: 130px;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  outline: none;
  border: none;
  background-color: #f60;
  cursor: pointer;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.active {
  background-color: rgba(65, 118, 182, 0.75) !important;
  color: #fff !important;
}
/* .clickAfter {
  background-color: rgba(65, 118, 182, 0.75);
  color: #fff;
}
.clickBefore {
  background-color: hsla(0, 0%, 100%, 0.55);
  color: #333333;
} */
.search-bg {
  padding-top: 300px;
  height: 100%;
  background: url('~@/assets/home-background.4f4209f9.jpg') no-repeat;
  background-size: cover;
}
</style>
